<!--
    vue-office文档：https://501351981.github.io/vue-office/examples/docs/config/event.html
-->
<template>
    <div class="file-mask">
        <vue-office-excel
            :src="`${realSrc}`"
            :options="props.options"
            :style="scale"
            class="file-content"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
        <div class="toolbar el-image-viewer__btn el-image-viewer__actions">
            <div class="el-image-viewer__actions__inner">
                <i class="el-icon" @click="smallerSize" title="缩小">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704M352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64"></path>
                    </svg>
                </i>
                <i class="el-icon" @click="biggerSize" title="放大">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704m-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64z"></path>
                    </svg>
                </i>
                <i class="el-icon" @click="props.close" title="关闭">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
                    </svg>
                </i>
            </div>

<!--            <el-button @click="biggerSize">放大</el-button>-->
<!--            <el-button @click="smallerSize">缩小</el-button>-->
<!--            <el-button @click="props.close">关闭</el-button>-->
        </div>

    </div>

</template>

<script setup>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
import {isHttp} from "../../utils/validate.js";
import { computed, reactive } from "vue";

//预览xlsx文件设为false；预览xls文件设为true
const props = defineProps({
  src: {
    type: String,
    default: ""
  },
  close: {
      type: Function,
      default: () => {

      }
  },
  options: {
      type: Object,
      default: {
          // 预览xlsx文件设为false；预览xls文件设为true
          xls: false,
          // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
          // minColLength: 0,
          // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
          // minRowLength: 0,
          // 如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
          widthOffset: 10,
          // 在默认渲染的列表高度上再加 Npx高
          heightOffset: 10,
          // 底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
          beforeTransformData: (workbookData) => {return workbookData},
          // 将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
          transformData: (workbookData) => {return workbookData}
      }

  },
  // 缩放比例配置
  scale: {
      type: Object,
      default: {
          // 当前比例
          currentScale: 1,
          // 最小比例
          minScale: 0.5,
          // 最大比例
          maxScale: 1.5,
          // 每次缩放的步长
          stepScale: 0.1
      }
  }
});


// 使用 reactive 创建响应式对象
const data = reactive({
    // 缩放比例
    scale: props.scale
});



/**
 * 放大
 * 按照一定比例发大预览窗口大小
 */
function biggerSize() {
    if (data.scale.currentScale < data.scale.maxScale) {
        data.scale.currentScale += data.scale.stepScale;
    }
}

/**
 * 缩小
 * 按照一定比例缩小预览窗口大小
 */
function smallerSize() {
    if (data.scale.currentScale > data.scale.minScale) {
        data.scale.currentScale -= data.scale.stepScale;
    }
}


/**
 * 渲染完成
 */
function renderedHandler() {
    // // docx节点
    // let docxContent = document.querySelector('.file-content');
    // // sheet节点
    // let sheetNodes = document.querySelectorAll('.file-content .x-spreadsheet-sheet');
    // if (sheetNodes.length > 0) {
    //     // 设置里面的文档页的宽度和弹窗内容div宽度一致
    //     docxContent.style.width = sheetNodes[0].getBoundingClientRect().width + 'px';
    // }
};



/**
 * 渲染失败
 */
function errorHandler() {
}

const scale = computed(() => `transform:scale(${data.scale.currentScale})`)

const realSrc = computed(() => {
    if (!props.src) {
        return;
    }
    if (isHttp(props.src)) {
        return props.src;
    }
    return import.meta.env.VITE_APP_BASE_API + props.src;
});



</script>

<style lang="scss" scoped>
.file-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: flex;
    align-items: center;

    .file-content {
        margin: 0 auto;
        width:60%;
        height: 100%;
    }

    .toolbar {
        position: fixed;
        bottom: 50px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
}
</style>
